<template>
    <div class="point-pool-wrapper"
        v-draggable-resizable="{
            storageKey: 'pointPool',
            controlPosition: 'top',
            hideHintText: '积分池'
        }"
    >
        <div class="hp-bar red" :style="hpBarStyle" :class="{ 'hp-hidden': redHpMax <= -1 }">   
            <div class="hp-fill" :style="{ width: redHpPercent }"></div>
            <span class="hp-text" v-show="redHpMax > -1">{{ props.redHpCurrent }}/{{ props.redHpMax }}</span>
        </div>
        
        <div class="pool-section">
            <span class="team-name left" :style="teamNameStyle" :class="{ 'hp-hidden': redHpMax <= -1 }">
                <span v-show="redHpMax > -1">{{ props.redName }}</span>
            </span>
            <div class="point-pool" :style="[containerStyle, ballBgStyle]">
                <span class="points-text points-overlay" :style="textStyle" :class="{ 'points-animate': isAnimating }">{{ formattedPoints }}</span>
            </div>
            <span class="team-name right" :style="teamNameStyle" :class="{ 'hp-hidden': blueHpMax <= -1 }">
                <span v-show="blueHpMax > -1">{{ props.blueName }}</span>
            </span>
        </div>
        
        <div class="hp-bar blue" :style="hpBarStyle" :class="{ 'hp-hidden': blueHpMax <= -1 }">
            <div class="hp-fill" :style="{ width: blueHpPercent }"></div>
            <span class="hp-text" v-show="blueHpMax > -1">{{ props.blueHpCurrent }}/{{ props.blueHpMax }}</span>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { defineProps, computed, ref, watch } from 'vue';

const props = defineProps({
    points: { type: Number, required: true },
    scale: { type: Number, default: 1 },
    redHpCurrent: { type: Number, required: true },
    redHpMax: { type: Number, required: true },
    blueHpCurrent: { type: Number, required: true },
    blueHpMax: { type: Number, required: true },
    blueName: { type: String, default: '蓝方' },
    redName: { type: String, default: '红方' }
});

// 动画状态
const isAnimating = ref(false);

// 监听积分变化，触发动画
watch(() => props.points, (newValue, oldValue) => {
    if (newValue !== oldValue) {
        isAnimating.value = true;
        setTimeout(() => {
            isAnimating.value = false;
        }, 300);
    }
});

const formattedPoints = computed(() => {
    const p = props.points;
    if (p >= 10000) {
        // 保留两位小数，且去掉多余的0
        const val = (p / 10000).toFixed(2).replace(/\.00$/, '').replace(/(\.\d)0$/, '$1');
        return `${val}万`;
    }
    // 小于1万时，显示千分位分隔符
    return p.toLocaleString();
});

// 容器样式：动态大小和边框
const containerStyle = computed(() => {
    const s = props.scale;
    const size = 70 * s;  // 圆直径，原来是50
    return {
        width: `${size}px`,
        height: `${size}px`,
        borderWidth: `${2 * s}px`,
        padding: `${4 * s}px`
    };
});

// 文本样式：动态字体大小
const textStyle = computed(() => {
    const s = props.scale;
    return {
        fontSize: `${16 * s}px`
    };
});

// 血条容器样式
const hpBarStyle = computed(() => {
    const s = props.scale;
    const width = `${250 * s}px`;
    const height = `${16 * s}px`;
    return {
        width,
        height,
        lineHeight: height,
        margin: `0 ${8 * s}px`
    };
});

// 队伍名字样式
const teamNameStyle = computed(() => {
    const s = props.scale;
    return {
        fontSize: `${14 * s}px`
    };
});

// 计算血条填充百分比
const redHpPercent = computed(() => {
    const c = props.redHpCurrent;
    const m = props.redHpMax;
    return `${Math.max(0, Math.min(100, (c / m) * 100))}%`;
});
const blueHpPercent = computed(() => {
    const c = props.blueHpCurrent;
    const m = props.blueHpMax;
    return `${Math.max(0, Math.min(100, (c / m) * 100))}%`;
});

// 计算红方血量比例
const redRatio = computed(() => {
    const r = props.redHpCurrent > 0 ? props.redHpCurrent : 0;
    const b = props.blueHpCurrent > 0 ? props.blueHpCurrent : 0;
    const total = r + b;
    if (total === 0) return 0.5; // 默认一半一半
    return r / total;
});

// 生成球体渐变背景
const ballBgStyle = computed(() => {
    const ratio = Math.round(redRatio.value * 100);
    // 左红右蓝
    return {
        background: `linear-gradient(90deg, #e87816 0%, #e87816 ${ratio}%, #19c788 ${ratio}%, #19c788 100%)`
    };
});
</script>

<style scoped lang="less">
.point-pool-wrapper {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    padding: 8px 0;
    z-index: 1000;
}

.pool-section {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.team-name {
    color: white;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
    white-space: nowrap;
    width: 60px;
    text-align: center;
    flex-shrink: 0;
}

.team-name.left {
    color: #e87816;
}

.team-name.right {
    color: #19c788;
}

.point-pool {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-style: solid;
    border-color: #4a90e2;
    border-radius: 50%;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
    overflow: visible; // 允许数字溢出球体
}

.points-text {
    white-space: nowrap;
    transition: transform 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.points-text.points-animate {
    animation: pointsScale 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

// 让分数文字始终在最上层并有阴影
.points-text.points-overlay {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    transform: translate(-50%, -50%);
    text-shadow: 0 2px 6px rgba(0,0,0,0.7), 0 0 2px #fff;
    font-weight: bold;
    pointer-events: none;
}

@keyframes pointsScale {
    0% {
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.3);
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
    }
}

.hp-bar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #333;
    border-radius: 4px;
    overflow: hidden;
    transition: opacity 0.3s ease;
}

.hp-bar .hp-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    height: 100%;
    transition: width 0.3s ease;
}

.hp-bar .hp-text {
    position: relative;
    z-index: 1;
    color: white;
    font-size: 0.75em;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    pointer-events: none;
    white-space: nowrap;
}

.hp-bar.red .hp-fill {
    background: #e87816;
}

.hp-bar.blue .hp-fill {
    background: #19c788;
}

.hp-bar.hp-hidden {
    opacity: 0;
    pointer-events: none;
}

.team-name {
    transition: opacity 0.3s ease;
}
</style>